import React, { useEffect, useRef } from 'react'
import { useSelector, useDispatch, useHistory } from "umi";
import { IExamQuestions, IExamType, IQuestionType, ISubject } from "@/utils/interface"
import styles from './viewQuestion.less'
import { Select, Form, Button } from 'antd'
const viewQusetion: React.FC = () => {
    // ref
    const selectAll = useRef(null)
    const dispatch = useDispatch()
    const history=useHistory()
    const { Option } = Select
    const editorLayout = {
        wrapperCol: { span: 20 }
    }
    useEffect(() => {
        dispatch({
            type: 'question/getQuestionType'
        })
        dispatch({
            type: 'question/getExamSubject'
        })
        dispatch({
            type: 'question/getExamType'
        })
        dispatch({
            type:'question/getExamQuestions'
        })
    }, [])
    //课程类型点击事件 高亮
    function Act(e:React.MouseEvent<HTMLDivElement>) {
        // if ((e.target as HTMLDivElement).tagName === 'SPAN') {
        //     if ((e.target as HTMLDivElement).classList.contains('active')) {
        //         (e.target as HTMLDivElement).classList.remove('active')
        //     } else {
        //         let arr = [...(selectAll.current as unknown as Element).querySelectorAll('span')];
        //         arr.forEach(item => item.classList.remove('active'));
        //         (e.target as HTMLDivElement).classList.add('active')
        //     }
        // }
        if ((e.target as HTMLDivElement).tagName === 'SPAN') {
            let p=(selectAll.current as unknown as Element).querySelectorAll('p')[0]
            let arr = [...(selectAll.current as unknown as Element).querySelectorAll('span')]
            if((p as unknown as Element).classList.contains('active')){
                (p as unknown as Element).classList.remove('active');
                arr.forEach(item => item.classList.remove('active'));
                (e.target as HTMLDivElement).classList.add('active');
            }else{
                if ((e.target as HTMLDivElement).classList.contains('active')) {
                    (e.target as HTMLDivElement).classList.remove('active')
                } else {
                    let arr = [...(selectAll.current as unknown as Element).querySelectorAll('span')];
                    arr.forEach(item => item.classList.remove('active'));
                    (e.target as HTMLDivElement).classList.add('active')
                }
            }  
        }
        if ((e.target as HTMLDivElement).tagName === 'P') {
            let arr = [...(selectAll.current as unknown as Element).querySelectorAll('span')];
            if ((e.target as any).classList.contains('active')) {
                (e.target as HTMLDivElement).classList.remove('active')
                arr.forEach(item=>item.classList.remove('active'))
            } else {
                (e.target as HTMLDivElement).classList.add('active')
                arr.forEach(item => {
                    item.classList.add('active')
                })
            }
        }
    }
    function onFinish(value: { exam_id: string, questions_type_id: string }) {
        // 获取高亮span
        let spans = [...(selectAll.current as unknown as Element).querySelectorAll('span.active')][0]
        let subject_id = (spans as HTMLElement).dataset.id
        let val={}
        val={
            ...value,
            subject_id
        }
        console.log(val)
        dispatch({
            type:'question/getCondition',
            payload:val
        })
    }
    const { subjects } = useSelector(module => (module as { question: { subjects: ISubject[] } }).question)
    const { examTypes } = useSelector(module => (module as { question: { examTypes: IExamType[] } }).question)
    const { questionTypes } = useSelector(module => (module as { question: { questionTypes: IQuestionType[] } }).question)
    const { examQuestions } = useSelector(module => (module as { question: { examQuestions: IExamQuestions[] } }).question)

    function pushQuestion(item:IExamQuestions){
        history.push({
            pathname:'/main/questionDetail',
            state:item,
        })
    }
    function pushCompile(item:IExamQuestions){
        history.push({
            pathname:'/main/compileDetail',
            state:item,
        })
    }
    return <div className={styles.wrap}>
        <h1>查看试题</h1>
        <div className={styles.header}>
            <div className={styles.content}>
                <div className={styles.class}>
                    <p>课程类型：</p>
                    <div onClick={Act} ref={selectAll}>
                        <p>All</p>
                        {
                            subjects?.map((item, index) => {
                                return <span key={item.subject_id}
                                            data-id={item.subject_id}>
                                    {item.subject_text}
                                </span>
                            })
                        }
                    </div>
                </div>
            </div>
            {/* 考试类型 */}
            <div className={styles.bodys}>
                <Form  onFinish={onFinish}>
                    <div>
                        <label htmlFor="">考试类型：</label>
                        <Form.Item name="exam_id"  {...editorLayout}>
                            <Select style={{width:250}}>
                                {
                                    examTypes.map((item => {
                                        return <Option key={item.exam_id} value={item.exam_id}>
                                            {item.exam_name}
                                        </Option>
                                    }))
                                }
                            </Select>
                        </Form.Item>
                    </div>
                    <div>
                        <label htmlFor="">题目类型：</label>
                        <Form.Item name="questions_type_id"  {...editorLayout}>
                            <Select style={{width:250}}>
                                {
                                    (questionTypes as IQuestionType[] ).map((item => {
                                        return <Option key={item.questions_type_id} value={item.questions_type_id}>
                                            {item.questions_type_text}
                                        </Option>
                                    }))
                                }
                                
                            </Select>
                        </Form.Item>
                    </div>
                    <Button htmlType="submit" className={styles.btn}>
                                查询
                    </Button>
                </Form>
            </div>
        </div>
        
        <div className={styles.footer}>
            {
                examQuestions.map((item,index)=>{
                    return <div key={index}>
                        <div onClick={()=>{pushQuestion(item)}} className={styles.items}>
                        <p> {item.title}</p>
                        <div className={styles.spans}>
                            <span>{item.questions_type_text}</span>
                            <span>{item.subject_text}</span>
                            <span>{item.exam_name}</span>
                        </div>
                        <div className={styles.p}>
                            {item.user_name} 发布
                        </div>
                        </div>
                        <div className={styles.compile} onClick={()=>{pushCompile(item)}}>
                            编辑
                        </div>
                    </div>
                })
            }
        </div>
    </div>
}
export default viewQusetion